import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Input, InputSearch, InputPassword } from "components/Input";

<Meta title="Components/Input" component={Input} />

# Input

A Wrap of html input.

## Props

All of the html input props can be used.

<Props of={Input} />

## Examples

### Basic

Basic usages for `Input` component.

<Preview>
  <Story name="basic input">
    <div>
      <p>Normal</p>
      <Input name="test" placeholder="please input a word" />
      <p>Readonly</p>
      <Input name="test" placeholder="please input a word" readOnly />
      <p>Disabled</p>
      <Input name="test" placeholder="please input a word" disabled />
      <p>Password</p>
      <InputPassword name="password" defaultValue="password" />
    </div>
  </Story>
</Preview>

### Search

<Preview>
  <Story name="search input">
    <div style={{ padding: 40 }}>
      <InputSearch name="search" placeholder="please input a word" />
    </div>
  </Story>
</Preview>
